<template>
  <div class="echarts">
    <div id="test" style="height: 400px; width: 600px;"></div>
  </div>
</template>

<script>
export default {
  name: "EchartsTest",
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('test'));
      // 指定图表的配置项和数据
      let option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data:['销量']
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [
            {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        },
          {
            name: '销量',
            type: 'pie',
            // 设置类型为南丁格尔图
            roseType: 'angle',
            //饼图大小、位置控制
            radius : '55%',
            center: ['50%', '30%'],
            itemStyle: {
              // 设置扇形的颜色
              color: '#c23531',
              // 阴影的大小
              shadowBlur: 200,
              // 阴影水平方向上的偏移
              shadowOffsetX: 0,
              // 阴影垂直方向上的偏移
              shadowOffsetY: 0,
              // 阴影颜色
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            // 字体颜色
            textStyle: {
              color: 'rgba(255, 255, 255, 0.3)'
            },
            labelLine: {
              // 视觉引导线的颜色
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data:[
              {value:235, name:'视频广告'},
              {value:274, name:'联盟广告'},
              {value:310, name:'邮件营销'},
              {value:335, name:'直接访问'},
              {value:400, name:'搜索引擎'}
            ]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.myEcharts()
  }
}
</script>

<style scoped>

</style>